<template>
  <div>
    <!-- 主要内容部分开始 -->
    <div class="content">
      <!-- 波浪图开始 -->
      <div class="waveImg currency">
        <!-- 题目部分开始 -->
        <span>关于我们</span>
        <!-- 题目部分结束 -->
      </div>
      <!-- 波浪图结束 -->

      <!-- 面包屑导航部分开始 -->
      <div class="coopeTitle currency">
        <el-breadcrumb separator=">">
          <el-breadcrumb-item :to="{ path: '/' }">网站首页</el-breadcrumb-item>
          <el-breadcrumb-item>
            <span style="color:red">关于我们</span>
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 面包屑导航部分结束 -->

      <!-- 内容包裹层开始 -->
      <div class="contentPack currency">
        <!-- 图文说明内容开始 -->
        <div class="imageText">
          <!-- 文字部分开始 -->
          <div class="text">
            <p>公司特与世纪联华超市有限公司、天天好大药房等合作，在浙江省多个城市100多家门店进行销售。此外公司还搭档杭州电视台生省多个城市</p>
            <p>公司特与世纪联华超市有限公司、天天好大药房等合作，在浙江省多个城市100多家门店进行销售。此外公司还搭档杭州电视台生省多个城市</p>
            <div>
              <span>矿买买</span>
              <span>专业的矿产交易平台</span>
            </div>
          </div>
          <!-- 文字部分结束 -->

          <!-- 图片部分开始 -->
          <div class="image">
            <img src="../assets/fen/10614.png" alt />
          </div>
          <!-- 图片部分结束 -->
        </div>
        <!-- 图文说明内容结束 -->

        <!-- 矿买买公司文化部分开始 -->
        <div class="company">
          <!-- 包裹层开始 -->
          <div>
            <!-- 文字部分开始 -->
            <div class="word">
              <span>矿买买</span>
              <span>公司文化</span>
              <span>更好，更专业</span>
            </div>
            <!-- 文字部分结束 -->

            <!-- 图文部分开始 -->
            <div class="imgWord" v-for="(item, index) in 5" :key="index">
              <img src="../assets/fen/Ellipse 1.png" alt />
              <span>核心价值观</span>
              <span>高效 进取 团队 结果 负责 感恩</span>
            </div>
            <!-- 图文部分结束 -->
          </div>
          <!-- 包裹层结束 -->
        </div>
        <!-- 矿买买公司文化部分结束 -->
      </div>
      <!-- 内容包裹层结束 -->

      <!-- 地图部分开始 -->
        <div class="map"></div>
        <!-- 地图部分结束 -->
    </div>
    <!-- 主要内容部分结束 -->
  </div>
</template>

<style lang="less" scoped>
// 主要内容部分开始
.content {
  // 波浪图开始
  .waveImg {
    width: 100%;
    height: 150px;
    left: 0;
    background-image: url("../assets/fen/形状 3.png");
    background-size: 100% 100%;
    text-align: center;
    line-height: 200px;

    span {
      color: white;
      font-size: 40px;
      font-weight: 800;
      letter-spacing: 5px;
    }
  }
  // 波浪图结束

  //   面包屑导航部分开始
  .coopeTitle {
    height: 80px;
    width: 60%;
    left: 20%;
    overflow: hidden;
    // background-color: turquoise;

    .el-breadcrumb {
      font-size: 17px;
      margin-top: 3%;
    }
  }
  //   面包屑导航部分结束

  //   内容包裹层开始
  .contentPack {
    width: 60%;
    left: 20%;
    // overflow: hidden;
    // background-color: turquoise;

    //   图文说明内容开始
    .imageText {
      width: 100%;
      height: 500px;
      margin-top: 50px;
      display: flex;
      justify-content: center;
      align-items: center;

      // 文字部分开始
      .text {
        width: 30%;

        p {
          font-size: 16px;
          letter-spacing: 1.5px;
          line-height: 28px;
        }

        div {
          padding-top: 40px;
          display: flex;
          justify-content: space-between;
          align-items: center;

          & > span:nth-child(1) {
            font-weight: 700;
          }
          & > span:nth-child(2) {
            font-weight: 700;
            color: red;
          }
        }
      }
      // 文字部分结束

      // 图片部分开始
      .image {
        width: 35%;
        margin-left: 10%;

        img {
          width: 100%;
          height: 100%;
        }
      }
      // 图片部分结束
    }
    //   图文说明内容结束

    // 矿买买公司文化部分开始
    .company {
      width: 85%;
      height: 400px;
      box-shadow: 0px 0px 10px 10px #f0f0f0;
      margin-left: 7.5%;
      border-radius: 20px;
      overflow: hidden;

      // 包裹层开始
      div {
        width: 80%;
        height: 350px;
        margin-left: 10%;
        margin-top: 25px;
        // background-color: royalblue;
        display: flex;
        flex-wrap: wrap;
        // justify-content: ;
        // align-items: center;

        // 文字部分开始
        .word {
          width: 20%;
          height: 40%;
        //   background-color: saddlebrown;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: flex-start;

          span {
            font-size: 25px;
          }
        }
        // 文字部分结束

        // 图文部分开始
        .imgWord {
          width: 20%;
          height: 40%;
        //   background-color: saddlebrown;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: flex-start;

          &>span:nth-child(2){
              font-size: 18px;
              margin-bottom: -10px;
          }

          &>span:nth-child(3){
              color: #A2A2A2;
              font-size: 13px;
          }
        }
        // 图文部分结束
      }
      // 包裹层结束
    }
    // 矿买买公司文化部分结束
  }
  //   内容包裹层结束

  // 地图部分开始
    .map {
        width: 100%;
        height: 400px;
        margin-top: 80px;
        background-image: url('../assets/fen/e5d183e58861d03f72026d7a6b4d243.png');
    }
    // 地图部分结束
}
// 主要内容部分结束
</style>

<script>
export default {
  data() {
    return {};
  },
};
</script>